<script setup>
import { defineProps } from 'vue'
defineProps({
  item: {
    type: Object
  }
})
</script>
<template>
  <div class="gooditem" style="overflow: hidden; height: 300px">
    <img
      :src="item.picture"
      alt=""
      style="width: 220px; height: 220px; background-color: white"
    />
    <p
      style="
        line-height: 80px;
        text-align: center;
        font-size: 12px;
        overflow: hidden;
        border-top: 1px solid black;
      "
    >
      {{ item.name }}
    </p>
    <div
      class="cover"
      style="height: 80px; background-color: #1dc779; cursor: pointer"
    >
      <p
        style="
          line-height: 40px;
          text-align: center;
          color: white;
          width: 70%;
          margin: 0 auto;
          font-size: 22px;
          border-bottom: 1px solid white;
        "
      >
        <el-icon><el-icon-Search></el-icon-Search></el-icon>
        找相似
      </p>
      <p style="line-height: 40px; text-align: center; color: white">
        点击查找类似商品
      </p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@keyframes move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-83px);
  }
}
.gooditem:hover .cover {
  //动作做完保持最后状态
  animation: move 0.5s;
  animation-fill-mode: forwards;
}
</style>
